<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Animations API</title>
	</head>
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
		}
		body {
			background-color: hsl(0deg, 0%, 10%);
			display: grid;
			height: 100vh;
			place-items: center;
		}
		.container {
			text-align: center;
		}
		h1 {
			font-size: 72px;
			color: #fff;
		}
		h2 {
			color: #fff;
			font-size: 18px;
			margin-top: 18px;
		}
	</style>
	<body>
		<div class="container">
			<h1 id="title">Welcome</h1>
			<h2 id="subtitle">Javascript Web Animations API</h2>
		</div>
	</body>
	<script type="text/javascript">
		// 动画值
		let fadeAndMove = [
			{
				opacity: 0,
				transform: `translateY(-20px)`
			},
			{
				opacity: 1,
				transform: `translateY(0)`
			},
		]
		// 动画执行时间
		let titleTiming = {
			duration: 2000,
			easing: "ease-in-out"
		}
		// 返回执行后的对象
		const titleChange = title.animate(fadeAndMove, titleTiming)
		
		let expand = [
			{
				letterSpacing: "-0.5em", // 字间距
				opacity: 0
			},
			{
				letterSpacing: "initial", // 初始值
				opacity: 1
			}
		]
		const subTitleChange = subtitle.animate(expand, {
			duration: titleChange.effect.getComputedTiming().duration / 2,
			easing: "ease-in-out"
		})
		subTitleChange.pause()
		
		title.onclick = function() {
			// idle(空闲), running(运行中), paused(暂停), finished(已完成)
			if (subTitleChange.playState === 'finished') return
			subTitleChange.play()
		}
	</script>
</html>
